<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/master' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框
                 :model="双向绑定表单的数据"
            -->
            <!--<el-form :inline="true" :model="menuFormData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="menuFormData.menuName" placeholder="请输入菜单名"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-date-picker
                            v-model="menuFormData.startDate"
                            type="date"
                            placeholder="选择开始日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item >
                    <el-date-picker
                            v-model="menuFormData.endDate"
                            type="date"
                            placeholder="选择结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="initMenu()">查询</el-button>
                    <el-button type="primary" @click="ins()">添加</el-button>
                </el-form-item>
            </el-form>-->
            <el-divider></el-divider>
            <el-button type="primary" icon="el-icon-edit"  @click="ins()"> 添加</el-button>
            <!--<el-item>
                <el-button type="primary" @click="ins()">添加</el-button>
            </el-item>-->
            <el-table
                    :data="tableData"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="menuId"
                    border
                    :tree-props="{children: 'sonList', hasChildren: 'hasChildren'}">
                <el-table-column
                        prop="menuId"
                        label="菜单Id"
                        sortable
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="menuName"
                        label="菜单名称"
                        sortable
                        width="100"
                >
                    <!--                <template slot-scope="scope"> -->
                    <!--                <i :class="'iconFont'+' '+'clms'+scope.row.icon"></i>-->
                    <!--                </template>-->

                </el-table-column>
                <el-table-column
                        width="120"
                        prop="url"
                        label="url">
                </el-table-column>
                <el-table-column
                        label="创建人"
                        prop="createBy"
                        width="100">
                </el-table-column>

                <el-table-column
                        prop="updateTime"
                        label="更新时间">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="说明">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-popconfirm
                                confirm-button-text='好的'
                                cancel-button-text='取消'
                                icon="el-icon-info"
                                icon-color="red"
                                title="您确定要删除该菜单吗"
                                @confirm=del(scope.row.menuId) >

                            <el-button type="danger" circle size="mini" icon="el-icon-delete" circle slot="reference" >删除</el-button></el-popconfirm>

                        <el-button type="warning" icon="el-icon-s-tools" size="mini" circle  @click="selById(scope.row.menuId)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--数据表格-->
           <!-- <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="menuId"
                            label="编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="menuName"
                            label="菜单名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="visible"
                            label="状态">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.visible"
                                    active-color="#13ce66"
                                    active-value="0"
                                    inactive-value="1"
                                    inactive-color="#ff4949"
                                    @change="switchStatus(scope.row.menuId,$event)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            prop="updateTime"
                            label="修改时间">
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" @click="selById(scope.row.menuId)" circle></el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="del(scope.row.menuId)" circle></el-button>
                        </template>
                    </el-table-column>
                </el-table>

                &lt;!&ndash;                分页&ndash;&gt;
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>-->
        </el-card>
        <!--                更新用户信息表单-->
        <el-dialog
                title="添加菜单"
                :visible.sync="editMenuDialog"
                width="30%"
                :before-close="resetForm">
            <!--            model表单数据-->
            <el-form  label-width="80px" :model="menuForm" :rules="menuFormRules" ref="menuFormRef">
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="menuForm.menuName"></el-input>
                </el-form-item>
                <el-form-item label="父级菜单" prop="parentId">
                    <el-select v-model="menuForm.parentId" placeholder="请选择">
                        <el-option
                                v-for="item in fatherMenuList"
                                :key="item.menuId"
                                :label="item.menuName"
                                :value="item.menuId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请求地址" prop="url">
                    <el-input v-model="menuForm.url"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" prop="icon">
                    <el-input v-model="menuForm.icon"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="menuForm.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="resetForm()">取 消</el-button>
                        <el-button type="primary" @click="editMenuBtn">确 定</el-button>
                    </span>
        </el-dialog>
    </div>
</template>

<script>


    export default {
        name: "Menu",
        data(){
            let validateAnotherMenuName = (rule, value, callback) => {
                //查询菜单是否重复
                this.$http.post(`/system/menu/selMenuName`,this.menuForm).then(function (res) {
                    if (res && res.data.result.code == '0') {

                        callback()
                    } else if (res && res.data.result.code == '1') {
                        callback(new Error('菜单已存在'))
                    }

                })
            }
            return {
                //条件搜索对象
                menuFormData:{},
                //表格数据
                tableData:[],

                //添加菜单弹出框显示状态
                editMenuDialog:false,
                //添加菜单表单信息
                menuForm:{},
                // 用户表单校验数据:
                menuFormRules:{
                    menuName:[{ required: true, message: '菜单不可为空',trigger: 'blur'},
                        { validator: validateAnotherMenuName, trigger: 'blur'}],
                    parentId:[{ required: true, message: '父菜单不可为空',trigger: 'blur'}]

                },
                //所有菜单
                fatherMenuList:{},
            }
        },
        created() {
            //获取菜单的信息
            this.initMenu();

        },
        methods:{


            //当改变没有显示的条数时触发该方法
            handleSizeChange(v){
                this.pageSize=v
                this.initMenu();
            },
            //切换页码时触发该方法
            handleCurrentChange(v){
                this.currentPage=v
                this.initMenu();
            },
            initMenu(){
                var that=this;
           /*     this.$http.post(`/system/menu/sel/${this.currentPage}/${this.pageSize}`,this.menuFormData).then(function (resp) {
                    that.tableData = resp.data.result.tableData.records;
                    that.total = resp.data.result.tableData.total;
                })*/
                this.$http.get(`system/menu/menutable`).then(function (response) {
                    that.tableData =response.data.result.menus
                })

            },
            //修改启用禁用状态
            switchStatus(userId,visible){
                this.$http.put(`/system/menu/up/${menuId}/${visible}`).then(function (re) {

                })
            },
            //添加修改菜单信息
            editMenuBtn(){
                var that = this;

                this.$refs.menuFormRef.validate((valid)=>{
                    if(valid) {//valid表示校验通过
                        //进行id判断,如果id不为空则回显数据,走修改,如果id为空,则走添加

                        if(this.menuForm.menuId!=null) {
                            this.$http.put(`/system/menu/updateMenuById`,this.menuForm).then(function (r) {
                                that.$message.success(r.data.message);
                                that.editMenuDialog=false;
                                that.initMenu();

                            })
                        }else{
                            this.$http.post(`/system/menu/insertMenu`,this.menuForm).then(function (r) {
                                console.log(r);
                                that.$message.success(r.data.message);
                                that.editMenuDialog=false;
                                that.initMenu();

                            })
                        }
                        that.menuForm={};
                    }
                })
            },
            //修改回显
            selById(menuId){
                this.editMenuDialog=true;
                var that=this;
                this.$http.get(`/system/menu/selById/${menuId}`).then(function (resp) {
                    that.menuForm=resp.data.result.menuInfo;
                })
                this.showParent();
            },
            //删除角色
            del(menuId){
                var that=this;
                this.$http.delete(`/system/menu/del/${menuId}`).then(function (resp) {
                    that.$message.success("删除成功");
                    that.initMenu();
                    // location.reload();
                })
                this.currentPage=1;
            },
            //下拉框展示
            showParent(){
                var that=this;
                console.log(this.menuForm)
                this.$http.post(`/system/menu/showParent`,this.menuForm).then(function (resp) {
                    that.fatherMenuList = resp.data.result.fatherMenuList;
                })
            },
            //点击添加
            ins(){
                this.editMenuDialog=true;
                this.showParent();
            },
            resetForm(){

                this.$refs.menuFormRef.resetFields();
                this.editMenuDialog=false;
            },


        }
    }
</script>

<style scoped>

</style>